diff options
| author | Sebastien Castiel <sebastien@castiel.me> | 2023-12-06 21:07:51 -0500 |
|---|---|---|
| committer | Sebastien Castiel <sebastien@castiel.me> | 2023-12-06 21:07:51 -0500 |
| commit | ec981fd237a50dfc547d8c162b22f4e1a691c9fc (patch) | |
| tree | 397d50c89122d2044d3343a099dd94b1056170d9 /src/app/groups/[groupId]/reimbursement-list.tsx | |
| parent | 59bb784b1c50ad57e7a0ce75cd0dc6fcd85a5594 (diff) | |
Improve responsiveness
Diffstat (limited to 'src/app/groups/[groupId]/reimbursement-list.tsx')
| -rw-r--r-- | src/app/groups/[groupId]/reimbursement-list.tsx | 12 |
1 files changed, 7 insertions, 5 deletions
diff --git a/src/app/groups/[groupId]/reimbursement-list.tsx b/src/app/groups/[groupId]/reimbursement-list.tsx index 3fc94bc..e8400ca 100644 --- a/src/app/groups/[groupId]/reimbursement-list.tsx +++ b/src/app/groups/[groupId]/reimbursement-list.tsx @@ -20,11 +20,13 @@ export function ReimbursementList({ return ( <div className="text-sm"> {reimbursements.map((reimbursement, index) => ( - <div className="border-t p-4 flex justify-between" key={index}> - <div> - <strong>{getParticipant(reimbursement.from)?.name}</strong> owes{' '} - <strong>{getParticipant(reimbursement.to)?.name}</strong> - <Button variant="link" asChild className="-my-3"> + <div className="border-t px-6 py-4 flex justify-between" key={index}> + <div className="flex flex-col gap-1 items-start sm:flex-row sm:items-baseline sm:gap-4"> + <div> + <strong>{getParticipant(reimbursement.from)?.name}</strong> owes{' '} + <strong>{getParticipant(reimbursement.to)?.name}</strong> + </div> + <Button variant="link" asChild className="-mx-4 -my-3"> <Link href={`/groups/${groupId}/expenses/create?reimbursement=yes&from=${reimbursement.from}&to=${reimbursement.to}&amount=${reimbursement.amount}`} > |